<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>外边距</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				weight:400px;
				height:400px;
				background-color:pink ;
				margin-top: 100px;
				/* border : 1px solid red; */
				overflow: hidden; /* 超出部分隐藏：解决边框塌陷问题 */
			
			}
			.er{
				width:300px;
				height:300px;
				background-color: skyblue;
				margin-top: 100px;
			}
			/* 外边距的使用场景
			    1. 盒子水平居中
				2. 初始化标签的内，外边距
				
				嵌套会级盒子外边距塌陷问题
				解决方法:
				 1.给父盒子添加边框
				 2.给父盒子添加内边框 ——会撑大盒子
				 3.给父盒子添加 overflow 
				*/
		</style>
	</head>
	<body>
		<!-- 盒子模型四要素
		 1.content 内容
		 2.padding 内边框
		 border 边框
		 margin 外边距 -->
		 <div class="box">
		<div class="er"></div>
		 </div>
	
	</body>
</html>
